<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>slice-splice</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
        color: gray;
    }

    span {
        color: black;
        font-size: 40px;
        display: block;
        margin-bottom: 10px;
    }
</style>
<script>
    // 构造函数
    function Person(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }

    // 向构造原型中添加一个system方法用来返回要输出的值
    Person.prototype.system = function () {
        return "我是" + this.name + "性别" + this.gender + "今年" + this.age + "岁"
    }
    // 对象实例化
    let person1 = new Person("张三", 16, "男")
    let person2 = new Person("李四", 18, "女")
    let person3 = new Person("王五", 11, "男")
    let person4 = new Person("龙六", 22, "女")

    // 将实例化的对象装入数组中
    let arr = [person1, person2, person3, person4]

    // 最初的arr数组的遍历
    document.write("<span>最初的arr数组的遍历:</span>")
    arr.forEach(function (value, index, object) {
        document.write(object[index].system() + "<br>")
    })

    // 使用slice()方法来提取指定的元素到新的数组  slice(start,end)索引，区间是左闭右开
    {
        function Slice(Arr) {
            //提取(1,3)之间的slice数组
            return Arr.slice(1, 4)
            //提取(3)后的slice数组
            // return Arr.slice(3)
            // 提取(2 -1)之间的slice数组
            // return Arr.slice(3 -1)
        }

        let slice = new Slice(arr)
        // 遍历提取后的slice数组
        document.write("<span>遍历提取(1,4)后的slice数组:</span>")
        slice.forEach(function (value, index, object) {
            document.write(object[index].system() + "<br>")
        })
    }

    /*
        * 使用splice()方法来删除指定的元素返回值是删除的元素
          -  splice(start,number)索引，start-开始位置 number-删除的数量
          -  splice(start,number,value,···)索引，start-开始位置 number-删除的数量 value-需要插入的值
     */
    {
        function Splice(Arr) {
            //删除从索引1开始共3个元素 返回值是被删除的元素
            return Arr.splice(1, 3)
            /*
               //返回被删除后的数组
               Arr.splice(1, 3)
               return Arr
            */
        }

        let splice = new Splice(arr)

        // 遍历删除后的splice数组
        document.write("<span>遍历删除(1,3)后的slice数组(返回被删除的元素):</span>")
        splice.forEach(function (value) {
            document.write(value.system() + "<br>")
        })
    }

</script>
<body>
</body>
</html>